ul.category-tree {
  padding: 0;
  .less,
  .more {
    position: relative;
    background: none;
    > .checkbox,
    > .radio {
      cursor: pointer;
      &::before {
        position: absolute;
        top: -.25rem;
        left: -.1rem;
        font-family: "Material Icons", Arial, Helvetica, sans-serif;
        font-size: 1.25rem;
        color: $gray-medium;
        cursor: pointer;
      }
    }
  }
  .less {
    > .checkbox,
    > .radio {
      &::before {
        content: "\E313";
      }
    }
  }
  .more {
    > .checkbox,
    > .radio {
      &::before {
        content: "\E5CC";
      }
    }
  }
  .category-label {
    position: relative;
    display: block;
    padding-right: 1.563rem;

    .category {
      position: absolute;
      top: .4em; // relative to the current font size, so "em" and not "rem"
      right: .4em;
      cursor: pointer;
    }
  }
  ul {
    padding-left: 1.563rem;
  }
  li {
    list-style: none;
    background-repeat: no-repeat;
    background-position: 0 3px;
    background-size: 12px 12px;
    .checkbox,
    .radio {
      padding-top: 0;
      padding-left: 20px;
    }
  }
}

// category tree on the catalog page
#tree-categories {
  padding: .625rem;

  .categories-tree-actions {
    margin-bottom: .625rem;
    white-space: nowrap; // prevent buttons from collapsing
    border-bottom: .063rem solid $gray-light;

    > a {
      display: inline-block;

      margin-bottom: .625rem;
      color: $gray-medium;

      + a {
        margin-left: .9375rem;
      }

      &:hover {
        text-decoration: none;
      }

      i.material-icons {
        font-size: 1.25rem;
        vertical-align: bottom;
      }
    }
  }

  label.form-control-label {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    color: $gray-medium;
  }

  #choice_tree {
    .category-tree {
      margin-bottom: 0;
    }
  }
}
